<template>
  <div>
      <!-- 分页器 -->
      <!-- @size-change="handleSizeChange" 每页显示的数量发生改变时触发
      @current-change="handleCurrentChange" 当前显示的页数发生改变时触发
      :current-page="currentPage4" 当前显示的是第几页
      :page-sizes="[100, 200, 300, 400]" 每页显示多少数据，可以是100,200,300等
      :page-size="100" 默认每页显示的数量为100
      layout="total, sizes, prev, pager, next, jumper" 分页器都具备哪些功能
      :total="400"> 总页数-->


    <!-- <el-pagination
      @size-change="handleSizeChange"
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination> -->

    <el-pagination
    background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.pageIndex"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

  </div>
</template>

<script>
export default {
  name: 'index',
  props:{
      pagination:{
          type:Object
      }
  },
  data(){
      return{
           show:true,
          //  每页默认显示10条
           num:10,
          //  当前默认显示第一条（从0开始
           current:0,
      }
  },
  methods: {
    //   每页显示的数量发生改变时触发
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.num=val;
        this.$emit('pagintionlist',{
          num:val,
          current:this.current,
        })
      },
    //   当前显示发生改变时触发
      handleCurrentChange(val) {
        this.current=val;
        console.log(`当前页: ${val}`);
        this.$emit('pagintionlist',{
          num:this.num,
          current:this.current,
        })
      },
    //   在边界的时候禁用

    },
}
</script>

<style scoped>
</style>
